<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="decorator" uri="http://www.opensymphony.com/sitemesh/decorator"%>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title><decorator:title /></title>
    <!-- basic styles -->
    <link href="../../css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../../css/font-awesome.min.css"/>

    <link rel="stylesheet" href="../../css/ace.min.css"/>
    <link rel="stylesheet" href="../../css/ace-rtl.min.css"/>
    <link rel="stylesheet" href="../../css/ace-skins.min.css"/>
    <%-- sweetalert --%>
    <link rel="stylesheet" href="../../css/plugins/sweetalert/sweet-alert.css"/>
    <script src="../../js/ace-extra.min.js"></script>

    <!-- <script
        src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> -->
    <script type="text/javascript">
        window.jQuery
        || document.write("<script src='../../js/jquery-2.0.3.min.js'>"
                + "<" + "script>");
    </script>
    <script type="text/javascript">
        if ("ontouchend" in document)
            document.write("<script src='../../js/jquery.mobile.custom.min.js'>"
                    + "<" + "script>");
    </script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/typeahead-bs2.min.js"></script>
    <script src="../../js/jquery-ui-1.10.3.custom.min.js"></script>
    <script src="../../js/jquery.ui.touch-punch.min.js"></script>
    <script src="../../js/jquery.slimscroll.min.js"></script>
    <script src="../../js/jquery.easy-pie-chart.min.js"></script>
    <script src="../../js/jquery.sparkline.min.js"></script>
    <script src="../../js/flot/jquery.flot.min.js"></script>
    <script src="../../js/flot/jquery.flot.pie.min.js"></script>
    <script src="../../js/flot/jquery.flot.resize.min.js"></script>
    <script src="../../js/ace-elements.min.js"></script>
    <script src="../../js/ace.min.js"></script>
    <%-- sweetalert --%>
    <script src="../../js/plugins/sweetAlert/sweet-alert.min.js"></script>
    <script type="text/javascript">
        $.extend({
            contextPath: function () {
                return '${pageContext.request.contextPath}';
            }
        })
    </script>
    <decorator:head />
</head>
<body>
<div class="navbar navbar-default" id="navbar">
    <script type="text/javascript">
        try {
            ace.settings.check('navbar', 'fixed')
        } catch (e) {
        }
    </script>
    <%--头部start--%>
    <div class="navbar-container" id="navbar-container">
        <%--头部左侧介绍信息--%>
        <div class="navbar-header pull-left">
            <a href="#" class="navbar-brand">
                <small><i class="icon-leaf"></i> myCat后台管理系统</small>
            </a>
        </div>
        <%--头部右侧用户信息--%>
        <div class="navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
                <li class="light-blue">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="<c:url value='${user.photo}'/>" alt="${user.userName} Photo"/>
                        <span class="user-info"> <small>欢迎光临,</small> ${user.userName} </span> <i class="icon-caret-down"></i>
                    </a>
                    <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                        <li><a href="#"> <i class="icon-cog"></i> 设置</a></li>
                        <li><a href="#"> <i class="icon-user"></i> 个人资料</a></li>
                        <li class="divider"></li>
                        <li><a href="/logout"> <i class="icon-off"></i> 退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <%--头部end--%>
</div>

<%--主体内容start--%>
<div class="main-container" id="main-container">
    <script type="text/javascript">
        try {
            ace.settings.check('main-container', 'fixed')
        } catch (e) {
        }
    </script>

    <div class="main-container-inner">
        <a class="menu-toggler" id="menu-toggler" href="#"> <span class="menu-text"></span></a>

        <div class="sidebar" id="sidebar">
            <script type="text/javascript">
                try {
                    ace.settings.check('sidebar', 'fixed')
                } catch (e) {
                }
            </script>

            <%--主体左侧 start--%>
            <%--主体左侧顶部4个图标 start--%>
            <div class="sidebar-shortcuts" id="sidebar-shortcuts">
                <div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
                    <button class="btn btn-success">
                        <i class="icon-signal"></i>
                    </button>

                    <button class="btn btn-info">
                        <i class="icon-pencil"></i>
                    </button>

                    <button class="btn btn-warning">
                        <i class="icon-group"></i>
                    </button>

                    <button class="btn btn-danger">
                        <i class="icon-cogs"></i>
                    </button>
                </div>

                <div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini">
                    <span class="btn btn-success"></span> <span class="btn btn-info"></span>
                    <span class="btn btn-warning"></span> <span class="btn btn-danger"></span>
                </div>
            </div>
            <%--主体左侧顶部4个图标 end--%>

            <%--页面菜单start--%>

            <ul class="nav nav-list">
                <c:forEach items="${indexMenu}" var="menuOneLevel" varStatus="status">
                    <li <c:if test="${selectMenu[menuOneLevel.id].id == menuOneLevel.id}">class="${selectMenu[menuOneLevel.id].style}"</c:if>>
                        <a href="${menuOneLevel.url}" class="dropdown-toggle">
                            <i class="${menuOneLevel.icon}"></i>
                            <span class="menu-text"> ${menuOneLevel.text} </span>
                            <c:if test="${menuOneLevel.children.size()>0}">
                                <b class="arrow icon-angle-down"></b>
                            </c:if>
                        </a>
                        <c:if test="${menuOneLevel.children.size()>0}">
                            <ul class="submenu">
                                <c:forEach items="${menuOneLevel.children}" var="menuTwoLevel">
                                    <li <c:if test="${selectMenu[menuTwoLevel.id].id == menuTwoLevel.id}">class="${selectMenu[menuTwoLevel.id].style}"</c:if>>
                                        <a href="${menuTwoLevel.url}" <c:if test="${menuTwoLevel.children.size()>0}">class="dropdown-toggle"</c:if>>
                                            <i class="icon-double-angle-right"></i> ${menuTwoLevel.text}
                                            <c:if test="${menuTwoLevel.children.size()>0}">
                                                <b class="arrow icon-angle-down"></b>
                                            </c:if>
                                        </a>
                                        <c:if test="${menuTwoLevel.children.size()>0}">
                                            <ul class="submenu">
                                                <c:forEach items="${menuTwoLevel.children}" var="menuThreeLevel">
                                                    <li <c:if test="${selectMenu[menuThreeLevel.id].id == menuThreeLevel.id}">class="${selectMenu[menuThreeLevel.id].style}"</c:if>>
                                                        <a href="${menuThreeLevel.url}" <c:if test="${menuTwoLevel.children.size()>0}">class="dropdown-toggle"</c:if>>
                                                            <c:if test="${menuThreeLevel.icon != null}">
                                                                <i class="${menuThreeLevel.icon}"></i>
                                                            </c:if>
                                                            ${menuThreeLevel.text}
                                                            <c:if test="${menuThreeLevel.children.size()>0}">
                                                                <b class="arrow icon-angle-down"></b>
                                                            </c:if>
                                                        </a>
                                                        <c:if test="${menuThreeLevel.children.size()>0}">
                                                            <ul class="submenu">
                                                                <c:forEach items="${menuThreeLevel.children}" var="menuFourLevel">
                                                                    <li <c:if test="${selectMenu[menuFourLevel.id].id == menuFourLevel.id}">class="${selectMenu[menuFourLevel.id].style}"</c:if>>
                                                                        <a href="${menuFourLevel.url}">
                                                                            <i class="icon-plus"></i> ${menuFourLevel.text}
                                                                        </a>
                                                                    </li>
                                                                </c:forEach>
                                                            </ul>
                                                        </c:if>
                                                    </li>
                                                </c:forEach>
                                            </ul>
                                        </c:if>
                                    </li>
                                </c:forEach>
                            </ul>
                        </c:if>
                    </li>
                </c:forEach>
            </ul>
            <%--页面菜单end--%>

            <%--左侧收缩标签start--%>
            <div class="sidebar-collapse" id="sidebar-collapse">
                <i class="icon-double-angle-left"
                   data-icon1="icon-double-angle-left"
                   data-icon2="icon-double-angle-right"></i>
            </div>
            <%--左侧收缩标签end--%>
            <script type="text/javascript">
                try {
                    ace.settings.check('sidebar', 'collapsed')
                } catch (e) {
                }
            </script>
        </div>
        <%--主体左侧 start--%>


        <!-- 页面下部右侧内容start -->
        <!-- 填充内容Body -->
        <decorator:body />
        <!-- 页面下部右侧内容end -->

        <%--页面右侧漂浮的设置按钮start--%>
        <div class="ace-settings-container" id="ace-settings-container">
            <div class="btn btn-app btn-xs btn-warning ace-settings-btn"
                 id="ace-settings-btn">
                <i class="icon-cog bigger-150"></i>
            </div>
            <div class="ace-settings-box" id="ace-settings-box">
                <div>
                    <div class="pull-left">
                        <select id="skin-colorpicker" class="hide">
                            <option data-skin="default" value="#438EB9">#438EB9</option>
                            <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                            <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                            <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                        </select>
                    </div>
                    <span>&nbsp; 选择皮肤</span>
                </div>
                <div>
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar"/> <label class="lbl" for="ace-settings-navbar"> 固定导航条</label>
                </div>
                <div>
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar"/> <label class="lbl" for="ace-settings-sidebar"> 固定滑动条</label>
                </div>
                <div>
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs"/> <label class="lbl" for="ace-settings-breadcrumbs">固定面包屑</label>
                </div>
                <div>
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl"/> <label class="lbl" for="ace-settings-rtl">切换到左边</label>
                </div>
                <div>
                    <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container"/> <label class="lbl" for="ace-settings-add-container"> 切换窄屏 <b></b></label>
                </div>
            </div>
        </div>
        <%--页面右侧漂浮的设置按钮end--%>
    </div>

</div>
</body>
</html>